<template>
    <div>
        <div class="info">
            <div class="title">
                <span class="title-text">修改密码</span>
            </div>
            <hr />
            <div class="personal">
                <el-form
                    :model="registerForm"
                    ref="registerForm"
                    label-width="90px"
                    class="demo-ruleForm"
                    :rules="rules"
                >
                    <el-form-item prop="password" label="密码">
                        <el-input
                            type="password"
                            v-model="registerForm.password"
                            placeholder="密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="confirmPassword" label="确认密码">
                        <el-input
                            type="password"
                            v-model="confirmPassword"
                            placeholder="确认密码"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <div @click="saveMsg">保存</div>
                    <div @click="goback(-1)">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { rules } from "@/assets/data/form";
import { mixin } from "@/mixins";
import { loginUpdatePassword } from "../api/index";

export default {
    name: "update-password",
    mixins: [mixin],
    data() {
        return {
            registerForm: {
                password: "", // 密码
            },
            rules: {}, // 表单提交的规则
            confirmPassword: "", // 确认密码
        };
    },
    computed: {
        ...mapGetters(["userId"]),
    },
    created() {
        this.rules = rules;
    },
    mounted() {},
    methods: {
        saveMsg() {
            let _this = this;
            if (this.confirmPassword) {
                if (this.confirmPassword === this.registerForm.password) {
                    loginUpdatePassword({
                        password: this.registerForm.password,
                    })
                        .then((res) => {
                            if (res.code === 1) {
                                _this.notify("修改成功", "success");
                                setTimeout(function () {
                                    // 修改密码成功退出登录
                                    this.$store.commit("setLoginIn", false);
                                    this.$store.commit("setIsActive", false);
                                    this.$router.go(0);
                                    _this.$router.push({ path: "/" });
                                }, 2000);
                            } else {
                                _this.notify("修改失败", "error");
                            }
                        })
                        .catch(() => {
                            _this.notify("修改失败", "error");
                        });
                } else {
                    _this.notify("两次输入的密码不相同！", "error");
                }
            }
        },
        goback(index) {
            this.$router.go(index);
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/info.scss";
</style>
